<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

</head>
<body>
  <div id="wrapper">
  <div id="map_canvas" style="width:75%; height:100%;display:block"></div>
    <div id="controls" style="display:block; position:absolute; width:25%;  top:8px; right:2px">
		
		<fieldset id="route_selection">
			<legend>Trajeto</legend>
			<label for="origin">Origem</label>
			<input type="text" id="origin"/>
			<label for="destination">Destino</label>
			<input type="text" id="destination"/>
			<input type="button" onclick="parseRoute()" value="Achar pontos"/>
		</fieldset>		
	</div>	
  </div>
</body>
<script type="text/javascript">
//GMAPS



var geocoder;
var map;
var center_vector = {
	lat1 : null,
	lat2 : null,
	lng1 : null,
	lng2 : null,
	center_lat : null,
	center_lng : null
};	

var dataTrap = {};





var marker_added = jQuery.Event('marker_added');
marker_added.quantity = 0;

function initialize(){
	geocoder = new google.maps.Geocoder();
	var latlng = new google.maps.LatLng(-23.5489433, -46.6388182); //replace this coords with dynamic geolocation.
	var myOptions = {
		zoom: 12,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions)
}
	


function geocodeAddress(address){
	if (geocoder) {
			geocoder.geocode({
				'address': address
			}, function(results, status){
				if (status == google.maps.GeocoderStatus.OK) {
					var marker = new google.maps.Marker({
						map: map,
						position: results[0].geometry.location,
						icon: "http://google-maps-icons.googlecode.com/files/cycling.png"
					});
											
				marker_added.quantity += 1;
				
				if(marker_added.quantity == 1){
					
					center_vector.lat1 = results[0].geometry.location.lat();
					center_vector.lng1 = results[0].geometry.location.lng();
					dataTrap.origin_coords = [(center_vector.lat1),(center_vector.lng1)]
					
				}else{
					center_vector.lat2 = results[0].geometry.location.lat();
					center_vector.lng2 = results[0].geometry.location.lng();
					dataTrap.destination_coords = [(center_vector.lat2),(center_vector.lng2)];
					
					center_vector.center_lat = (center_vector.lat1+center_vector.lat2)/2;
					center_vector.center_lng = (center_vector.lng1+center_vector.lng2)/2;
					
					var newMapCenter = new google.maps.LatLng(center_vector.center_lat,center_vector.center_lng);
					map.setCenter(newMapCenter);
					route_UIConfirmation()
				}
				
			}
			
				else {
					alert("Geocode errors:" + status);
				}
			});
			
		}

}



//called when all markers have been added
function route_UIConfirmation(){
	
	$('#route_selection	').empty();
	$('#route_selection').append(
	'<h4 style="margin-top:0px">Confirma o trajeto?</h4>'+
	'<button id="confirm" onclick="confirmRoute()">Sim</button><button id="cancel" onclick="cancelRoute()">Não</button>'
	);
}

function confirmRoute(){
	$.ajax({
   type: "POST",
   url: "teste",
   data: {"origin":dataTrap.origin,'origin_coords':dataTrap.origin_coords,"destination":dataTrap.destination,'destination_coords':dataTrap.destination_coords},
   dataType: 'json',
   success: function(msg){
     alert( "Data Saved: " + msg.destination);
   }
 });
$('#controls').ajaxError(function(){
		alert("Ajax error");
	});

}
function cancelRoute(){
	
	$('#route_selection').empty();
	$('#route_selection').append(
	'<legend>Trajeto</legend>'+
	'<label for="origin">Origem</label>'+
	'<input type="text" id="origin" value="'+dataTrap.origin+'"/>'+
	'<label for="destination">Destino</label>'+
	'<input type="text" id="destination" value="'+dataTrap.destination+'"/>'+
	'<input type="button" onclick="parseRoute()" value="Achar pontos"/>'
	)
}



//called on click
function parseRoute(){
	var origin = $('#origin').val();
	var destination = $('#destination').val();
	dataTrap.origin = origin;
	dataTrap.destination = destination;

 
 if (origin.length > 0 && destination.length > 0) {
 geocodeAddress(origin);
 geocodeAddress(destination);
 }
 else{
 alert("Can't parse")
 }

 
 }



//JQUERY
$(document).ready(function(){
initialize();
});

</script>
</html>